<template>
  <AtomForm v-if="show&&attrs"
   :ref="ref" 
   v-bind="attrs" 
   :data="anc.dataSet.formData"
   @onload="onload"
   @change="change"
   @validate="onValidate"></AtomForm>
</template>

<script>
const ref = "form";
export default {
  name: ref,
  components: {},
  inject: ["anc"],
  data() {
    return {
      ref,
      show:false,
      attrs:null,
    };
  },
  props: {},
  watch: {},
  computed: {},
  created() {
    this.beforePageInit();
  },
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      this.pageInit();
    });
  },
  methods: {
    /**
     * 页面加载前初始化
     */
    beforePageInit(){
      this.attrs = this.attrsTpl();
      this.show = true;
    },
    /**
     * 页面加载后初始化
     */
    pageInit(){

    },
    /**
     * @description: 获取表格属性
     * @param {*} attr
     * @return {*}
     */
    attrsTpl() {
      return {
        config:{
          labelWidth:100,//label宽度
          labelPosition:'right',//label位置
          cols:3,//一行几列
          onlyRead:false,//是否只读
          sync:true,//是否同步
          columns:[
            {
              title:'字段标题',//字段标题
              key:'key',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              // rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            }
          ],//字段列表
          rules:{},
        },
      };
    },
    /**
     * 事件：表格加载后获取表格实例
     * @param tableIns 表格实例，相当于 this.$refs[this.ref]
     */
    load(tableIns){

    },
    change(key,value){

    },
    onValidate(prop, status, error){

    },
    validate(fn) {
      return this.$refs[this.ref].validate((valid) => {
        if (fn) {
          return fn(valid);
        } else {
          return valid;
        }
      });
    },
    resetFields() {
      this.$refs[this.ref].resetFields();
    },
  },
};
</script>
<style scoped></style>
